<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        list-style-type: none;
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    a:hover {
        color: #CC0000;
    }

    .header {
        background-color: pink;
        background: url("img/t1.jpg") no-repeat center top;
        width: auto;
        height: 140px;
    }

    .header .center {
        width: 1200px;
        height: 100%;
        /* background-color: red; */
        margin: auto;
    }

    .center .logo {
        /* display: block; */
        float: left;
        width: 625px;
        height: 100%;
        background: url("img/Iconfont.png") no-repeat center center;
    }

    .search {
        float: right;
        width: 295px;
        height: 100%;
        /* background-color: red; */
        display: flex;
        /* 添加这一行 */
    }

    .keyword {
        display: inline-block;
        width: 200px;
        height: 30px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #222;
        font-size: 14px;
        padding-left: 18px;
        margin-top: 57px;
        /* 修改这一行 */
        margin-left: 7px;
    }

    .submit {
        display: inline-block;
        height: 30px;
        padding: 0px 6px;
        margin-left: 5px;
        font-size: 14px;
        line-height: 28px;
        margin-top: 57px;
        /* 修改这一行 */
    }


    .nav {
        /* background-color: pink; */
        width: 1232px;
        height: 63px;
        margin: auto;
        display: flex;
    }

    .navlist {
        float: left;
        width: 112px;
        height: 40px;
        margin: 11.5px 0;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #646465;
        background-color: white;
    }

    .navlist:hover a {
        display: block;
        color: white;
        background-color: #0B62C1;
    }

    .dropli {
        display: none;
        color: white;
        background-color: #0B62C1;
        z-index: 100;
    }

    .navlist:hover .dropli {
        display: block;
        position: relative;
    }

    .dropli:hover {
        background-color: #3EA2ED;
    }

    .main {
        /* background-color: red; */
        height: 1190px;
        width: 1200px;
        margin: auto;
    }

    .carouselChart {
        width: 1200px;
        height: 360px;
        margin-bottom: 20px;
    }

    .carouselChart img {
        width: 100%;
        /* transition: all .3s; */
    }

    .news {
        float: left;
        width: 420px;
        height: 346px;
        /* background-color: pink; */
    }

    .newscar img {
        width: 420px;
        height: 276px;
    }

    .news span {
        float: left;
        height: 34px;
        font-size: 18px;
        line-height: 34px;
        font-weight: 700;
        margin-right: 20px;
    }

    .button {
        display: block;
        width: 180px;

        float: right;
        margin-top: -33px;
        /* z-index: 100px; */
        position: relative;
    }

    .button li {
        width: 30px;
        height: 22px;
        color: white;
        font-size: 15px;
        line-height: 22px;
        text-align: center;
        border-radius: 7px;
        background-color: rgb(102, 102, 102);
        margin-right: 5px;
        float: left;

        opacity: .5;
    }

    .button .active {
        background-color: #F17B0A;
        opacity: 1;
        width: 35px;
        height: 27px;
    }

    .title {
        width: 420px;
        height: 36px;
        font-size: 12px;
        font-weight: bold;
        line-height: 220%;
        background-color: white;
    }

    .summary {
        float: left;
        width: 486px;
        height: 346px;
        padding-left: 20px;
        /* background-color: whitesmoke; */
    }

    .summary .top {
        height: 34px;
        border-bottom: 1px solid rgb(30, 95, 194);

    }

    .top img {
        float: right;
        /* height: 34px; */
        margin-top: 7px;
    }

    .content {
        padding: 0 10px;
        /* overflow: hidden; */
    }

    .content li {
        display: block;
        width: 445px;
        /* float: right; */
        font-size: 15px;
        line-height: 50px;
        color: #222;
        height: 42px;
        border-bottom: 1px solid rgb(225, 225, 225);
    }

    li .time {
        float: right;
        height: 42px;
        color: #a2a2a2;
        font-size: 12px;
    }

    .guild {
        float: left;
        width: 294px;
        height: 347px;
        padding-top: 32px;
        padding-left: 16px;
        /* background-color: pink; */
    }

    .guild img {
        margin-bottom: 10px;
    }

    .announcement {
        float: left;
        width: 487px;
        height: 238px;
        /* background-color: pink; */

    }

    .top {
        width: 100%;
        height: 34px;
        border-bottom: 1px solid rgb(162, 162, 162);
    }

    .top span {
        float: left;
        height: 34px;
        line-height: 34px;
        margin-right: 20px;
    }

    .top .ch {
        font-size: 18px;
        font-weight: bold;
    }

    .top .eng {
        font-size: 13px;
        color: #428cd1;
    }

    .mescontent {
        padding: 0px 10px;
        height: 204px;
        /* background-color: black; */

    }

    .mescontent li {
        height: 30px;
    }

    .mescontent li .time {
        height: 30px;
    }



    .academic {
        float: left;
        width: 356px;
        height: 246px;
        /* background-color: pink; */
        padding-left: 20px;
    }

    .employment {
        float: right;
        width: 357px;
        height: 238px;
        padding-left: 20px;
        /* background-color: pink; */
    }

    .links {
        float: left;
        width: 1200px;
        height: 164px;
        /* background-color: pink; */
    }

    .links ul img {
        float: left;
        margin: 5px;
    }

    .footer {
        background-color: rgb(0, 90, 153);
        width: 100%;
        height: 118px;
        padding-top: 14px;

    }

    .footer ul li {
        width: 100%;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: white;
        /* margin: auto; */
    }
</style>

<body>
    <div class="header">
        <div class="center">
            <span class="logo"></span>
            <span class="search">
                <input type="search" class="keyword" placeholder="请输入关键字">
                <input type="submit" class="submit" value="搜 索">
            </span>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li class="navlist">
                <a href="#">首页</a>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
            <li class="navlist">
                <a href="#">学院概况</a>
                <ul>
                    <li class="dropli">1</li>
                    <li class="dropli">2</li>
                    <li class="dropli">3</li>
                    <li class="dropli">4</li>
                    <li class="dropli">5</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="main">
        <div class="carouselChart">
            <img src="img/ban1.png" alt="">
        </div>
        <div class="news">
            <span>学院动态</span>
            <span style="font-size: 13px; color: #428cd1; font-weight: normal;">NEWS</span>
            <!-- 新闻轮播图 -->
            <div class="newscar">
                <img src="img/newsban1.png" alt="">
                <ul class="button">
                    <li class="active">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <div class="title">巴拉巴拉扒拉扒拉扒拉扒拉</div>
            </div>
        </div>

        <!-- 做摘要栏 -->
        <div class="summary">
            <div class="top">
                <a href="#"><img src="img/more.png" alt=""></a>
            </div>
            <div class="content">
                <ul>
                    <li><a href="#" title="“研”途有我丨我院举行2024届考研学生复试指导和复试模拟培训交流会">“研”途有我丨我院举行2024届考研学生复试指...</a>
                        <span class="time">03-06</span>
                    </li>
                    <li><a href="#" title="上好 “开学第一课”——计算机与信息学院开展新学期宿舍走访工作">上好 “开学第一课”——计算机与信息学院开...</a>
                        <span class="time">03-06</span>
                    </li>
                    <li><a href="#" title="计算机与信息学院召开2024年春季学期“三全育人”班主任工作会">计算机与信息学院召开2024年春季学期“三全育...</a>
                        <span class="time">03-06</span>
                    </li>
                    <li><a href="#" title="我校电子信息硕士学位授权点全票通过专项核验">我校电子信息硕士学位授权点全票通过专项核验</a>
                        <span class="time">03-06</span>
                    </li>
                    <li><a href="#" title="计算机与信息学院召开2021级考研就业动员大会">计算机与信息学院召开2021级考研就业动员大会</a>
                        <span class="time">03-06</span>
                    </li>
                    <li><a href="#" title="我院开展“感受艺术魅力 弘扬时代精神”主题美育思政课">我院开展“感受艺术魅力 弘扬时代精神”主题...</a>
                        <span class="time">03-06</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 服务栏 -->
        <div class="guild">
            <a href="#"><img src="img/i1.png" alt=""></a>
            <a href="#"><img src="img/i2.png" alt=""></a>
            <a href="#"><img src="img/i3.png" alt=""></a>
            <a href="#"><img src="img/i4.png" alt=""></a>

        </div>

        <!-- 信息栏 -->
        <ul class="mes">
            <li class="announcement">
                <div class="top"><span class="ch">通知公告</span><span class="eng">ANNOUNCEMENT</span><img
                        src="img/more.png" alt=""> </div>
                <div class="mescontent">
                    <ul>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                        <li>三峡大学计算机与信息学院诚聘海内外优秀博士 <span class="time">03-06</span></li>
                    </ul>
                </div>
            </li>
            <li class="academic">
                <div class="top"><span class="ch">学术动态</span><span class="eng">ACADEMIC</span><img src="img/more.png"
                        alt="">
                </div>
                <div class="mescontent">
                    <ul>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                        <li>我在小冰等你来【实习生招聘专场】 <span class="time">03-06</span></li>
                    </ul>
                </div>
            </li>
            <li class="employment">
                <div class="top"><span class="ch">就业信息</span><span class="eng">EMPLOYMENT</span><img src="img/more.png"
                        alt="">
                </div>
                <div class="mescontent">
                    <ul>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                        <li>研究生罗智明荣获武汉计算机软件工程... <span class="time">03-06</span></li>
                    </ul>
                </div>
            </li>
            <li class="links">
                <div class="top"><span class="ch">相关链接</span><span class="eng">RELATED LINKS</span>
                    <img src="img/more.png" alt="">
                </div>

                <ul>
                    <li><img src="img/l1.png" alt=""></li>
                    <li><img src="img/l2.png" alt=""></li>
                    <li><img src="img/l3.png" alt=""></li>
                    <li><img src="img/l4.png" alt=""></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- <div class="white" style="height: 34px; width: 12"></div> -->
    <div class="footer">
        <ul>
            <li>CopyRights ©2007-2008 All Rights Reserved 三峡大学计算机与信息学院</li>
            <li>电 话：(0717)6393156 邮 编：443002</li>
            <li>地 址：湖北省宜昌市大学路8号 电子邮件：jsjyb@ctgu.edu.cn</li>
        </ul>
    </div>
</body>
<script>

    // 大轮播图
    let i = 0
    const pic = [{ url: 'img/ban1.png' }, { url: 'img/ban2.png' }, { url: 'img/ban3.png' }]
    const ban = document.querySelector('.carouselChart img')
    function car() {
        ban.src = pic[i % 3].url
        i++
    }
    car()
    setInterval(car, 4000)
    //小轮播图
    let j = 0
    const newsdate = [{ url: 'img/newsban1.png', title: '学院召开研究生教育工作专题研讨会' },
    { url: 'img/newsban2.png', title: '当十八岁遇见一百岁，校长喊你过成人礼' },
    { url: 'img/newsban3.png', title: '我院学生在全国大学生嵌入式芯片与系统设计竞赛中荣获佳绩' },
    { url: 'img/newsban4.png', title: '学院召开2024届毕业生班主任工作会暨考研就业工作布置会' },
    { url: 'img/newsban5.png', title: '计算机与信息学院召开“情系三大，筑梦计信”校友座谈会' }]
    const newsimg = document.querySelector('.newscar img')
    const newsword = document.querySelector('.newscar .title')
    function newscar() {
        if (j == 5) j = 0
        newsimg.src = newsdate[j % 5].url
        newsword.innerHTML = newsdate[j].title
        //右下角变化
        document.querySelector('.button .active').classList.remove('active')
        document.querySelector(`.button li:nth-child(${j + 1})`).classList.add('active')
        j++
    }
    newscar()
    setInterval(newscar, 2000)
</script>

</html>